<template>
	<div class="erp-left">
		<div class="left-content" v-for='(item,index) in userMenu' key='index'>
			<dl>
				<dt class="con-dt">
					<span>{{item.title}}</span>
				</dt>
				<dd class="con-dd">
					<div class="dd-item" 
						v-for="(obj,index_child) in item.list" 
						key='index_child'
						:class="{'active': obj.active == active}"
						@click="routerClick(obj)">
						<a>{{obj.name}}</a>
					</div>
				</dd>
			</dl>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				active: '',
				userMenu: [],
			}
		},
		methods: {
			activeEvent: function(pars){
				this.active = pars
			},
			routerClick: function(item){
				this.$router.push(item.path);
			},
		},
		created(){
			this.userMenu = this.$menuTop.userMenu;
			this.$bus.on('activeEvent',this.activeEvent)
			this.$bus.on('menuEvent',-1);
		},
	}
</script>

<style scoped="scoped" lang="less">
	.erp-left{
		width: 212px;
	    font-size: 13px;
	    float: left;
	    overflow: hidden;
	    .left-content{
	    	.con-dt{
	    		height: 36px;
			    line-height: 36px;
			    padding-left: 10px;
			    color: rgb(89, 90, 90);
			    font-weight: bold;
			    border: 1px solid #ddd;
			    position: relative;
			    background: rgb(245, 247, 250);
			    border-bottom: none;
	    	}
	    	.con-dd{
    		    border: 1px solid #ddd;
    			border-top: none;
    			.dd-item{
    				border-top: 1px solid #ddd;
    				background: #fff;
    				&:hover{
					    background-color: #4998de;
    					border-color: #3A8DE4;
    				}
    				&:hover a{
    					color: #fff;
    				}
    				a{
					    display: block;
					    width: 100%;
					    height: 100%;
					    line-height: 36px;
					    text-indent: 20px;
					    text-decoration: none;
					    position: relative;
					    cursor: pointer;
    				}
    			}
    			.active{
    				background-color: #4998de;
					border-color: #3A8DE4;
    			}
	    	}
	    }
	}
</style>